<template>
  <!-- 建设项目-任务管理-任务执行 -->
  <div>
    <el-form
      :inline="true"
      label-width="180"
      :model="formInline"
      ref="formRef"
      class="demo-form-inline"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属项目:">
            {{ state.form.projectName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属阶段:">
            {{ state.form.projectStageName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属项目任务名称:">
            {{ state.form.taskName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务计划时间范围:">
            {{ state.form.planStartTime }}至{{ state.form.planEndTime }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务主责部门:">
            {{ state.form.responsibleDepartmentName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务责任人:">
            {{ state.form.responsibleUserName }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <tableIndex
        :tableData="state.tableData"
        :tableHead="tableHead"
        :isIndex="true"
        :isSelection="false"
        :isRadio="false"
        :notSearch="true"
        :fields="state.fields"
        :height="500"
        :isPaging="false"
      >
        <template #isOverdue="{ row }">
          <AlarmClock
            v-if="row.isOverdue == 1"
            style="width: 1em; height: 1em; color: #fc7018"
          />
          <AlarmClock v-else style="width: 1em; height: 1em" />
        </template>

        <template #operate>
          <el-table-column label="操作" width="500" align="center" fixed="right">
            <template #default="{ row }">
              <el-button
                v-if="
                  (row.status == -1 &&
                    row.auditStatus == 2 &&
                    row.isOverdue == 1) ||
                  (row.status == -1 &&
                    row.auditStatus == 0 &&
                    row.isOverdue == 0)
                "
                size="small"
                class="button_edit"
                type="primary"
                @click="addHandler(row)"
                >{{ row.actionName }}</el-button
              >
              <el-button v-if="row.status===4" @click="addHandler(row)">{{row.actionName}}待提交</el-button>
              <el-button
                v-if="
                  row.status > 0 ||
                  (row.businessAuditStatus == 3 && row.status == -1)
                "
                size="small"
                class="button_edit"
                type="primary"
                @click="lookHandler(row)"
                >查看结果</el-button
              >
              <el-button
                v-if="
                  row.isOverdue == 1 &&
                  row.status == -1 &&
                  (row.auditStatus == 0 || row.auditStatus == 3)
                "
                size="small"
                class="button_edit"
                type="primary"
                @click="anticipateHandler(row, '逾期上报')"
                >逾期上报</el-button
              >
              <el-button
                v-if="row.auditStatus == 1 && row.status == -1"
                size="small"
                class="button_edit"
                type="primary"
                @click="anticipateHandler(row, '审核')"
                >审核</el-button
              >
              <!-- v-if="row.isOverdue == 1" -->
              <!-- <el-button
                size="small"
                class="update"
                type="primary"
                @click="overdueHandler(row)"
                >逾期上报</el-button
              > -->
            </template>
          </el-table-column>
        </template>

        <template #lcb="{ row }">
          <svg-icon
            v-if="row.milestoneStatus != -1"
            style="cursor: pointer"
            @click="svgHandler(row)"
            icon-class="lcb_true"
          />
          <svg-icon
            v-else
            style="cursor: pointer"
            @click="svgHandler(row)"
            icon-class="lcb_false"
          />
        </template>
      </tableIndex>
    </div>

    <overDialog ref="overdialog" @refreshList="projectTaskList"></overDialog>

    <contractDialog
      ref="contractdialog"
      @refreshList="projectTaskList"
    ></contractDialog>


    <reportDialog ref="reportdialog"></reportDialog>

    <CommonTitle titleName="任务执行时间表"></CommonTitle>
    <!-- 甘特图 -->
    <div class="timeTask">
      <ProjectGantt2
        v-if="state.dataList.length > 0 && dataListShow"
        :ganttList="state.dataList"
        type="任务执行"
      ></ProjectGantt2>
    </div>
    <gantteCom ref="gantte" :ganttList="state.dateList"></gantteCom>
  </div>
  <!-- 逾期上报 -->
  <anticipatLoading
    @projectTaskList="projectTaskList"
    ref="anticipatLoadingRef"
  ></anticipatLoading>

  <!--    提交预算审批单-->
    <budget-approval-popup
            ref="budgetApprovalPopupRef"
            @onSuccess="projectTaskList"
    ></budget-approval-popup>
</template>

<script setup>
import '@/views/constructionProjectManage/static/button.scss'
import { AlarmClock } from '@element-plus/icons-vue'
import { ref, reactive, watch, onMounted, onBeforeMount } from 'vue'
import { projectTaskApi } from '@/api/project'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'
import { useRoute, useRouter } from 'vue-router'
import {
  ElForm,
  ElCol,
  ElRow,
  ElFormItem,
  ElDialog,
  ElMessage
} from 'element-plus'
import TableIndex from '@/components/table/index.vue'
import CommonTitle from '@/components/CommonTitle.vue'
import ProjectGantt2 from '@/views/tenderProjectManage/taskManage/components/gantt_chart.vue'
//实施成果
import OverDialog from '@/views/constructionProjectManage/mytobeDone/components/overDialog.vue'
// 逾期上报
import AnticipatLoading from '@/views/constructionProjectManage/projectImplementationTask/anticipatLoading.vue'
//合同扫描
import ContractDialog from '@/views/constructionProjectManage/mytobeDone/components/contractDialog.vue'
//上报弹框
import ReportDialog from '@/views/constructionProjectManage/mytobeDone/components/reportDialog.vue'
import GantteCom from '@/views/constructionProjectManage/project_mt/components/gantt_chart.vue'
import { GetDateDiff } from '@/common/utils/GlobalUtils'
// 提交预算审批单
import BudgetApprovalPopup from "@/views/taskImplementationManagement/components/budgetApprovalPopup.vue";


const gantte = ref(null)
const overdialog = ref(null)
const contractdialog = ref(null)
const anticipatLoadingRef = ref(null)
const state = reactive({
  tableData: [],
  dataList: [],
  centerDialogVisible: false,
  dateList: [],
  form: {
    taskName: '',
    planEndTime: '',
    planStartTime: '',
    responsibleDepartmentName: '',
    responsibleUserName: '',
    responsibleDepartmentId: ''
  },
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  }
})
let formInline = reactive({
  signingMethod: ''
})

const tableHead = reactive([
  {
    prop: 'isOverdue',
    label: '是否逾期',
    slot: 'isOverdue'
  },
  {
    prop: 'milestoneStatus',
    label: '里程碑(关注)',
    slot: 'lcb',
    minWidth: 100,
  },
  {
    label: '工作细项(任务节点)',
    prop: 'itemName',
    minWidth: 130,
  },
  {
    label: '节点计划开始时间',
    prop: 'planStartTime',
    minWidth: 130,
  },
  {
    label: '节点计划结束时间',
    prop: 'planEndTime',
    minWidth: 130,
  },
  {
    label: '实施行为类型',
    prop: 'actionName',
    minWidth: 100,
  },
  {
    label: '实施状态',
    prop: 'status',
    formatter: (row) => {
      // -1未开始1进行中2已完成
      if (row.status === -1) {
        return '未开始'
      } else if (row.status === 1) {
        return '进行中'
      } else if (row.status === 2) {
        return '已完成'
      }else if(row.status === 3){
          return '驳回'
      }else if(row.status===4){
          // return '暗线转明线待提交'
          return '待提交';
      }
    }
  }
])
const projectTendersWayList = reactive([
  {
    label: '招标',
    value: '1'
  },
  {
    label: '招标',
    value: '2'
  }
])

const projectProposal = () => {
  state.centerDialogVisible = true
}

const budgetApprovalPopupRef = ref(null);
let router = useRouter()
const addHandler = (row) => {
  /*0
  :
  {actionId: "1", actionName: "上传实核成果"}
  1
  :
  {actionId: "2", actionName: "组织会议"}
  2
  :
  {actionId: "3", actionName: "发起招采需求议题请示"}
  3
  :
  {actionId: "4", actionName: "发起招采需求业务请示"}
  4
  :
  {actionId: "5", actionName: "上报决策会议名"}
  5
  :
  {actionId: "6", actionName: "推荐服务单位"}
  6
  :
  {actionId: "7", actionName: "提供合同初稿"}
  7
  :
  {actionId: "8", actionName: "发起招标（选）合同会审"}
  8
  :
  {actionId: "9", actionName: "上传已签章的合同原件"}*/

  switch (row.actionId) {
      case '10':
          let params = {
              projectName:state.form.projectName,
              projectStageName:state.form.projectStageName,
              taskName:state.form.taskName,
              projectId:state.form.projectId,
              projectTaskId:row.projectTaskId,
              itemId:row.itemId,
          }
          budgetApprovalPopupRef.value.openPopup(params);
          break;
    case '7':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/contract/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${
          row.itemId
        }&isLook=${0}&type=0`
      })
      break
    case '6':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/service/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&isLook=${0}`
      })
      break
    case '3':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/topic/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&isLook=${0}`
      })
      // 发起招采需求议题请示
      break
    case '4':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/approve/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&isLook=${0}`
      })

      break
    case '5':
      router.push({
        path: `/constructionProjectManage/projectImplementationTask/decisionIndex/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${row.itemId}&isLook=${0}`
      })

      break
    case '8':
      router.push({
        path: `/constructionProjectManage/projectImplementationTask/callForBids/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${
          row.itemId
        }&isLook=${0}&type=1`
      })

      break
    case '9': // 上传已盖章的合同附件
      contractdialog.value.state.dialogVisible = true
      contractdialog.value.state.businessId = row.businessId
      contractdialog.value.state.projectTaskId = row.projectTaskId
      contractdialog.value.state.type = 0
      contractdialog.value.state.itemId = row.itemId
      break
    case '1':
      overdialog.value.state.centerDialogVisible = true
      overdialog.value.state.businessId = row.businessId
      overdialog.value.state.projectTaskId = row.projectTaskId
      overdialog.value.state.type = 0
      overdialog.value.state.itemId = row.itemId
      break
    case '2':
      router.push({
        path: `/constructionProjectManage/projectImplementationTask/organizeAMeeting/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${row.itemId}&isLook=${0}`
      })

      break
    default:
      break
  }
}
const lookHandler = (row) => {
  switch (row.actionId) {
    case '7':
      //合同初稿
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/contract/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&itemId=${
          row.itemId
        }&isLook=${1}&type=0`
      })
      break
    case '6':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/service/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&isLook=${1}`
      })
      break
    case '3':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/topic/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&isLook=${1}`
      })
      // 查看招采需求议题请示
      break
    case '4':
      router.push({
        path: `/constructionProjectManage/projectSupervision/components/approve/projectId=${
          state.form.projectId
        }&itemId=${row.itemId}&projectTaskId=${row.projectTaskId}&isLook=${1}`
      })

      break
    case '5':
      router.push({
        path: `/constructionProjectManage/projectImplementationTask/decisionIndex/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${row.itemId}&isLook=${1}`
      })
      break
    case '8':
      router.push({
        path: `/constructionProjectManage/projectImplementationTask/callForBids/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${
          row.itemId
        }&isLook=${1}&type=1`
      })
      break
    case '9':
      contractdialog.value.state.dialogVisible = true
      contractdialog.value.state.businessId = row.businessId
      contractdialog.value.state.projectTaskId = row.projectTaskId
      contractdialog.value.state.type = 1
      contractdialog.value.state.itemId = row.itemId
      break
    case '1':
      overdialog.value.state.centerDialogVisible = true
      overdialog.value.state.businessId = row.businessId
      overdialog.value.state.projectTaskId = row.projectTaskId
      overdialog.value.state.type = 1
      overdialog.value.state.itemId = row.itemId
      break
    case '2':
      router.push({
        path: `/constructionProjectManage/projectImplementationTask/organizeAMeeting/projectId=${
          state.form.projectId
        }&projectTaskId=${row.projectTaskId}&itemId=${row.itemId}&isLook=${1}`
      })

    default:
      break
  }
}
const reportdialog = ref(null)
//里程碑
const svgHandler = (row) => {
  projectTaskApi.updateLcb({ id: row.itemId }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('修改成功')
      projectTaskList()
    }
  })
}
//逾期上报
const overdueHandler = (row) => {
  reportdialog.value.state.centerDialogVisible = true
  reportdialog.value.state.type = 0
  reportdialog.value.state.projectTaskId = row.projectTaskId
}
let route = useRoute()
const getInfo = () => {
  projectTaskApi
    .getInfo(getURLhandler(route.path).projectTaskId)
    .then((res) => {
      if (res.code == 200) {
        state.form = res.data
      }
    })
}
//获取列表
const projectTaskList = () => {
  projectTaskApi
    .projectTaskList(getURLhandler(route.path).projectTaskId)
    .then((res) => {
      if (res.code == 200 && res.data) {
        state.tableData = JSON.parse(JSON.stringify(res.data))
        state.dataList = res.data.map((v) => {
          const obj = {
            taskName: state.form.taskName,
            text: v.itemName,
            nodeName: v.itemName,
            duration: GetDateDiff(v.planStartTime, v.planEndTime) + 1,
            realStartTime: v.planStartTime,
            realEndTime: v.planEndTime,
            start_date: new Date(v.planStartTime)
          }
          return obj
        })
      }
    })
}
const dataListShow = ref(false)

// 逾期上报
const anticipateHandler = (row, type) => {
  anticipatLoadingRef.value.open(row, type)
}

watch(
  () => state.dataList,
  (value) => {
    if (value.find((v) => v.realStartTime)) {
      dataListShow.value = true
    }
  }
)

onMounted(() => {
  getInfo()
  projectTaskList()
})
</script>
<style scoped lang="scss">
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  // .el-form-item {
  //   width: 20%;
  // }
}

.el-select {
  width: 100%;
}
</style>
